<template>
    <div class="rotation-bar">
        <div class="degree-part">
            <span class="rotate-value">{{degree}}</span>
            <span style="width: 0;">°</span>
        </div>
        <div class="rotation-bar-part">
            <div class="svg-part">
                <svg :width="svgWidth" :height="svgHeight" :view-box="`0 0 ${svgWidth} ${svgHeight}`">
                    <defs>
                        <linearGradient id="fadeGradient">
                            <stop offset="0" stop-color="black"></stop>
                            <stop offset="0.1" stop-color="white"></stop>
                            <stop offset="0.9" stop-color="white"></stop>
                            <stop offset="1" stop-color="black"></stop>
                        </linearGradient>
                        <mask id="fade">
                            <rect :height="svgHeight" :width="maskWidth" :x="positionX" fill="url(#fadeGradient)">
                            </rect>
                        </mask>
                        <mask id="colorize">
                            <rect :height="svgHeight" :width="maskWidth" :x="positionX" fill="#605e5c"></rect>
                            <rect :height="svgHeight" :width="originMove<0?-originMove:originMove" :x="originX" fill="white"></rect>
                        </mask>
                    </defs>
                    <g mask="url(#fade)" fill="#000" stroke="#000">
                        <g mask="url(#colorize)">
                            <g data-testid="ticksParent" :transform="`translate(${originMove},0)`">
                                <template v-for="i in 9" :key="i">
                                    <rect stroke-width="0" :x="(i - 1) * 60" y="10" width="4" height="12" rx="2" ry="2">
                                    </rect>
                                    <circle stroke-width="0" r="2" :cx="(i - 1) * 60 + 14" cy="16"></circle>
                                    <circle stroke-width="0" r="2" :cx="(i - 1) * 60 + 26" cy="16"></circle>
                                    <circle stroke-width="0" r="2" :cx="(i - 1) * 60 + 38" cy="16"></circle>
                                    <circle stroke-width="0" r="2" :cx="(i - 1) * 60 + 50" cy="16"></circle>
                                </template>
                                <rect stroke-width="2" x="541" y="11" width="6" height="10" rx="4" ry="4"
                                    fill="transparent"></rect>
                                <circle stroke-width="0" r="2" cx="558" cy="16"></circle>
                                <circle stroke-width="0" r="2" cx="570" cy="16"></circle>
                                <circle stroke-width="0" r="2" cx="582" cy="16"></circle>
                                <circle stroke-width="0" r="2" cx="594" cy="16"></circle>
                                <template v-for="i in 8" :key="i + 9">
                                    <rect stroke-width="0" :x="(i + 9) * 60 + 4" y="10" width="4" height="12" rx="2"
                                        ry="2"></rect>
                                    <circle stroke-width="0" r="2" :cx="(i + 9) * 60 + 18" cy="16"></circle>
                                    <circle stroke-width="0" r="2" :cx="(i + 9) * 60 + 30" cy="16"></circle>
                                    <circle stroke-width="0" r="2" :cx="(i + 9) * 60 + 42" cy="16"></circle>
                                    <circle stroke-width="0" r="2" :cx="(i + 9) * 60 + 54" cy="16"></circle>
                                </template>
                                <rect stroke-width="0" :x="18 * 60 + 4" y="10" width="4" height="12" rx="2"
                                        ry="2"></rect>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
            <div class="svg-origin">
                <svg width="8" height="32" view-box="0 0 8 32" fill="none">
                    <rect width="8" height="24" x="0" y="4" rx="4" ry="4" fill="#000"></rect>
                </svg>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";

const emit = defineEmits(['rotate','finish'])

const props = defineProps({
    width: Number,
});

const maxWidth = 700;
const maskWidth = computed(() => {
    const width = props.width as number;
    return Math.min(maxWidth - 20, width - 20);
});

const positionX = computed(() => {
    return svgWidth.value / 2 - maskWidth.value / 2;
});

const svgWidth = ref(1088);
const svgHeight = ref(32);

// 刻度轴原点位置
const originX = ref(0)
// 刻度轴移动的距离
const originMove = ref(0)

// 旋转一度需要移动的距离
const DEGREE = 542 / 45
const degree = ref('0')
const moveRotation = (el:any) => {
    el.preventDefault();
    const x = el.clientX
    const move = originMove.value
    document.onmousemove = (elMove) => {
        const current = elMove.clientX - x
        originMove.value = move + current
        if(originMove.value<0){
            if(originMove.value < -542) originMove.value = -542
            originX.value = svgWidth.value / 2 - 4 + originMove.value
        }else{
            originX.value = svgWidth.value / 2 - 4
            if(originMove.value > 542) originMove.value = 542
        }
        degree.value = (-originMove.value/DEGREE).toFixed(1)
        if(degree.value.charAt(degree.value.length-1) == '0'){
            degree.value = degree.value.split('.')[0]
        }

        emit('rotate',parseFloat(degree.value))
    }
    document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
        emit('finish',{degree:degree.value,originX:originX.value,originMove:originMove.value})
    }
}

// 重置
const resetRotation = () => {
    degree.value = '0'
    originX.value = 0
    originMove.value = 0
}

onMounted(() => {
    document.querySelector('.svg-part')?.addEventListener('mousedown',(el) => moveRotation(el))
    originX.value = svgWidth.value / 2 - 4
})

onUnmounted(() => {
    document.querySelector('.svg-part')?.removeEventListener('mousedown', (el) => moveRotation(el))
})

defineExpose({
    resetRotation
})
</script>

<style scoped lang="scss">
@import "../styles/cropper.scss";
</style>
